<template>
    <div class="activity">
        <h2 class="title">公告与活动</h2>
        <div class="activity-text">
            {{bulletin}}
        </div>
        <ul class="activity-desc">
            <li class="desc-item"  v-for="(item, index) in supports" :key="index">
                <span class="desc-icon" :class="classMap[item.type]"></span>
                <span class="desc-text">{{item.description}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "activity",
    data() {
        return {

        }
    },
    props: {
        supports:{
            type: Array
        },
        bulletin: {
            type: String
        }
    },
    created() {
        this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
    }
}
</script>


<style lang="stylus" ref="stylesheet/stylus">
@import "../assets/stylus/index.styl";
    .activity
        .title
            font-size 16px
            font-weight bold
        .activity-text
            padding 12px
            font-size 12px
            color rgb(240, 20, 20)
            font-weight 200
            line-height 24px
        .activity-desc
            margin-top 4px
            .desc-item
                border-top 1px solid rgba(7, 17, 27, .1)
                padding 16px 12px
            .desc-icon
                display inline-block
                width 16px 
                height 16px
                // bg-image(guarantee_1)
                background-size 16px 16px
                vertical-align middle
                &.decrease
                    bg-image(decrease_1)
                &.discount
                    bg-image(discount_1)
                &.guarantee
                    bg-image(guarantee_1)
                &.invoice
                    bg-image(invoice_1)
                &.special
                    bg-image(special_1)
            .desc-text 
                font-size 12px
                font-weight 200
                color rgb(7, 17, 27)
                line-height 16px

                


</style>
